import React, { useEffect,useState,useRef } from 'react'
import './grbk.css'
import { Button,Input,Select,DatePicker,Pagination,Modal,Radio } from 'antd';
import { PlusCircleOutlined,DownloadOutlined,EditOutlined } from '@ant-design/icons';
import {getList,getprepar,editPrepar,editInstance,editAudit} from '../request/instance'
import Draggable from 'react-draggable';
const App = function () {
    const [open, setOpen] = useState(false);
      const [disabled, setDisabled] = useState(true);
      const [bounds, setBounds] = useState({
        left: 0,
        top: 0,
        bottom: 0,
        right: 0,
      });
      const draggleRef = useRef(null);
      const onStart = (_event, uiData) => {
        const { clientWidth, clientHeight } = window.document.documentElement;
        const targetRect = draggleRef.current?.getBoundingClientRect();
        if (!targetRect) {
          return;
        }
        setBounds({
          left: -targetRect.left + uiData.x,
          right: clientWidth - (targetRect.right - uiData.x),
          top: -targetRect.top + uiData.y,
          bottom: clientHeight - (targetRect.bottom - uiData.y),
        });
      };
    let [page,setpage]=useState(1)//ye
    let [pageSize,setpageSize]=useState(5)
    let [grade,setgrade]=useState([])
    let [discipline,setdiscipline]=useState([])
    let [prepar,setprepar]=useState([])
    let [total,settotal]=useState('')
    let [name,setname]=useState('')//搜索备课名称
    let [teacher,setteacher]=useState('')//搜索教师名称
    let [bktype,setbktype]=useState('')//搜索备课类型
    let [discipline1,setdiscipline1]=useState('')//搜索学科
    let [grade1,setgrade1]=useState('')//搜索年级
    let [audit1,setaudit1]=useState('')//搜索审核
    let [start,setstart]=useState('')//搜索开始时间
    let [end,setend]=useState('')//搜索结束时间
    const [editingRow, setEditingRow] = useState(null);//编辑备课质量id
    let [quality,setquality] =useState('')
    let [start1,setstart1]=useState('')//搜索时间的双向绑定
    let [end1,setend1]=useState('')//搜索时间的双向绑定
    const [isModalOpen, setIsModalOpen] = useState(false);//查看
    let [audit,setAudit]=useState('合格')
    let [obj,setobj]=useState({})
    const chongzhi=()=>{//重置按钮事件
        setname('')//备课名称
        setteacher('')//教师名称
        setbktype('')//备课类型
        setdiscipline1('')//学科
        setgrade1('')//年级
        setaudit1('')//审核
        setstart('')//开始时间
        setend('')//结束时间
        setstart1('')
        setend1('')
        getprepar().then((ren)=>{
            setprepar(ren.data.prepar)
            settotal(ren.data.total)
        })
    }
    useEffect(() => {
        getList().then((ren)=>{
            let d=[]
            let c=[]
            ren.data.discipline.forEach(i => {
                c.push({'value':i.discipline,'label':i.discipline})
            });
            ren.data.grade.forEach(i => {
                d.push({'value':i.grade,'label':i.grade})
            });
            setdiscipline(c)
            setgrade(d)
        })
    }, [])
    useEffect(()=>{
        getprepar().then((ren)=>{
            setprepar(ren.data.prepar)
            settotal(ren.data.total)
        })
    },[])
    const getp=()=>{
        setpage(1)
        getprepar({name,teacher,bktype,"discipline":discipline1,"grade":grade1,"audit":audit1,start,end,page,pageSize}).then((ren)=>{
            setprepar(ren.data.prepar)
            settotal(ren.data.total)
        })
    }
    return <>
        <div className='main'>
            <div className='top'>
                <div>
                    <span>备课名称 <Input style={{width:'160px'}} placeholder="输入备课组名称" value={name}
                    onInput={(e)=>{setname(e.target.value)}}/></span>
                    <span>教师姓名 <Input style={{width:'160px'}} placeholder="输入备课组组长" value={teacher}
                    onInput={(e)=>{setteacher(e.target.value)}}/></span>
                    <span>备课类型 <Select style={{width:'160px'}} value={bktype}
                        onChange={(e)=>{setbktype(e);
                        }}
                        options={[
                        {
                            value: '教案',
                            label: '教案',
                        },{
                            value: '导学案',
                            label: '导学案',
                        },{
                            value: '课件',
                            label: '课件',
                        },
                        ]}
                    /></span>
                    <span>学科 <Select  style={{width:'160px'}} value={discipline1}
                        onChange={(e)=>{setdiscipline1(e);
                        }}
                        placeholder="请选择学科"
                        options={discipline}
                    /></span>
                    <span>年级 <Select  style={{width:'160px'}} value={grade1}
                        onChange={(e)=>{setgrade1(e);
                        }}
                        placeholder="请选择年级"
                        options={grade}
                    /></span>
                </div>
                <div><span>审核状态 <Select style={{width:'160px'}} value={audit1}
                        onChange={(e)=>{setaudit1(e);
                        }}
                        placeholder="请选择状态"
                        options={[
                        {
                            value: '合格',
                            label: '合格',
                        },{
                            value: '不合格',
                            label: '不合格',
                        },{
                            value: '待审核',
                            label: '待审核',
                        },
                        ]}
                    /></span>
                    <span>
                        时间范围  
                        <DatePicker placeholder='开始时间' onChange={(e,q)=>{setstart(q)
                        setstart1(e)
                        }} 
                        style={{width:'160px'}} value={start1}
                        /><span>--</span>
                        <DatePicker placeholder='结束时间' onChange={(e,q)=>{setend(q),setend1(e)}} style={{width:'160px'}}
                        value={end1}
                        />
                    </span>
                    </div>
                    <hr style={{width:'98%',color:'rgb(237, 237, 237)'}}/>
                <div className='button'>
                    <Button type="primary" onClick={()=>{getp()}}>查询</Button> 
                    <Button color="primary" variant="outlined" onClick={chongzhi}>重置</Button>
                </div>
            </div>
            <div className='box'>
            <div>
                <div className='box_div1'>
                    <Button type="link" icon={<DownloadOutlined />}>导出</Button>
                    <Button type="link" icon={<PlusCircleOutlined />}>新增备课组</Button>
                </div>
            </div>
                <table width='1100px' border='1px' style={{}} cellSpacing='0'>
                    <thead>
                        <tr>
                            <td>序号</td>
                            <td>备课名称</td>
                            <td>教师名称</td>
                            <td>备课类型</td>
                            <td>学科</td>
                            <td>年级</td>
                            <td>册次</td>
                            <td>审核结果</td>
                            <td>备课质量等级</td>
                            <td>提交时间</td>
                            <td>操作</td>
                        </tr>
                    </thead>
                    <tbody>
                        {prepar.map((i,index)=><tr key={i._id}>
                            <td>{index+1}</td>
                            <td>{i.name}</td>
                            <td>{i.teacher}</td>
                            <td>{i.bktype}</td>
                            <td>{i.discipline}</td>
                            <td>{i.grade}{i.semester}</td>
                            <td>{i.volume}</td>
                            <td>{i.audit}</td>
                            <td align='right'>{editingRow!==i._id&&i.quality}
                                {editingRow===i._id&&<Select style={{width:'80px'}}
                                onChange={(e)=>{
                                    setquality(e)
                                    editPrepar({"id":editingRow,"quality":e})
                                    setEditingRow(null)
                                    getp()
                                }}  value={quality}
                                    options={[
                                    {
                                        value: '优秀',
                                        label: '优秀',
                                    },{
                                        value: '良好',
                                        label: '良好',
                                    },{
                                        value: '合格',
                                        label: '合格',
                                    },{
                                        value: '不合格',
                                        label: '不合格',
                                    },
                                    ]}
                                />}
                                {editingRow!==i._id&&<Button type="link" shape="circle" icon={<EditOutlined />} 
                                onClick={()=>{
                                    setquality(i.quality)
                                    setEditingRow(i._id)
                                }}
                                />}
                            </td>
                            <td>{i.data}</td>
                            <td>
                            <Button type="link">下载</Button>
                            <Button type="link" onClick={()=>{
                                setIsModalOpen(true)
                                setobj(i)
                                
                                }}>查看</Button>
                            <Button type="link"
                             onClick={()=>{
                                setOpen(true)
                                setobj(i)
                                }}
                            >审核</Button>
                            {!i.instance&&<Button type="link" onClick={()=>{
                                editInstance({id:i._id,instance:true}).then(ren=>{
                                    getp()
                                })
                                
                            }}>设为实例</Button>}
                            </td>
                        </tr>)}
                    </tbody>
                </table>
                <Pagination
                total={total}
                showTotal={(total) => `共 ${total} 条`}
                defaultPageSize={pageSize}
                defaultCurrent={page}
                onChange={(e)=>{console.log(e);
                }}
                />
            </div>
            <Modal
                    title={
                      <div
                        style={{
                          width: '100%',
                          cursor: 'move',
                        }}
                        onMouseOver={() => {
                          if (disabled) {
                            setDisabled(false);
                          }
                        }}
                        onMouseOut={() => {
                          setDisabled(true);
                        }}
                        onFocus={() => {}}
                        onBlur={() => {}}
                      >
                        {/* {obj.name} */}
                      </div>
                    }
                    open={open}
                    onOk={()=>{setOpen(false)
                        editAudit({id:obj._id,audit:audit}).then(ren=>{
                        getp()
                        })
                    }}
                    onCancel={()=>{setOpen(false)}}
                    okText='确认'
                    cancelText='取消'
                    modalRender={(modal) => (
                      <Draggable
                        disabled={disabled}
                        bounds={bounds}
                        nodeRef={draggleRef}
                        onStart={(event, uiData) => onStart(event, uiData)}
                      >
                        <div ref={draggleRef}>{modal}</div>
                      </Draggable>
                    )}
                  >
                {!obj.instance&&<p style={{display:'flex',justifyContent:'right'}}>
                    <Button type='link' onClick={()=>{
                        editInstance({id:obj._id,instance:true}).then(ren=>{
                            setIsModalOpen(false)
                            getp()
                        })
                        
                }}>设为实例</Button>
                </p>}
                {obj.file&&<img src={obj.file} alt="" width="700px" height="400px"/>}
                <p>教师：{obj.teacher}</p>
                <p>学科：{obj.discipline}</p>
                <p>版本：{obj.version}</p>
                <p>任教年级：{obj.grade}{obj.semester}</p>
                <p>教学章节：{obj.course}</p>
                <p>涉及知识点：{obj.knowledge}</p>
                <p>备课质量：{obj.quality}</p>
                <p>备课时间：{obj.data}</p>
                <p>审核结果：{obj.audit}</p>
                <p>来源：{obj.source?obj.source:'未知'}</p>
            </Modal>
            <Modal
                    title={
                      <div
                        style={{
                          width: '100%',
                          cursor: 'move',
                        }}
                        onMouseOver={() => {
                          if (disabled) {
                            setDisabled(false);
                          }
                        }}
                        onMouseOut={() => {
                          setDisabled(true);
                        }}
                        onFocus={() => {}}
                        onBlur={() => {}}
                      >
                        {obj.name}
                      </div>
                    }
                    open={isModalOpen}
                    onOk={()=>{setIsModalOpen(false)}}
                    onCancel={()=>{setIsModalOpen(false)}}
                    okText='知道了'
                    cancelText='取消'
                    modalRender={(modal) => (
                      <Draggable
                        disabled={disabled}
                        bounds={bounds}
                        nodeRef={draggleRef}
                        onStart={(event, uiData) => onStart(event, uiData)}
                      >
                        <div ref={draggleRef}>{modal}</div>
                      </Draggable>
                    )}
                  >
                {obj.file&&<img src={obj.file} alt="" width="700px" height="400px"/>}
                <p>教师：{obj.teacher}</p>
                <p>学科：{obj.discipline}</p>
                <p>版本：{obj.version}</p>
                <p>任教年级：{obj.grade}{obj.semester}</p>
                <p>教学章节：{obj.course}</p>
                <p>涉及知识点：{obj.knowledge}</p>
                <p>备课质量：{obj.quality}</p>
                <p>备课时间：{obj.data}</p>
                <p>来源：{obj.source?obj.source:'未知'}</p>
                <p><b style={{backgroundColor:'rgb(0, 126, 252)',color:"rgb(0, 126, 252)"}}>|</b>
                 备课审核
                </p>
                <p>
                <Radio.Group
                name="radiogroup"
                value={audit}
                onChange={(e)=>{setAudit(e.target.value);
                }}
                options={[
                {
                    value: '合格',
                    label: '合格',
                },
                {
                    value: '不合格',
                    label: '不合格',
                },
                ]}
            />
                </p>
            </Modal>
        </div>
    </>
}

export default React.memo(App);